/** 路由视图组件 */
import { Suspense } from "react";

import {
  Switch,
  Route,
  Redirect
} from "react-router-dom"

import Login from '../views/Login'


// 封装路由视图组件
// <RouterView routes="routes"><RouterView>
function RouterView(props) {
  // 解构获取路由
  const { routes } = props

  // 生成路由视图
  return <Suspense fallback="加载中...">
    <Switch>
      {
        routes.map(route => {

          if (route.redirect) {
            console.log("加载路由匹配规则(重定向)....")
            // 重定向
            return <Route path={route.path}
              exact={route.exact}
              key={route.name}>
              <Redirect to={route.redirect} />
            </Route>
          } else {
            // 正常跳转
            console.log("加载路由匹配规则(正常跳转)....")
            // -> Route通过component直接渲染组件
            // return <Route path={route.path}
            //   exact={route.exact}
            //   key={route.name}
            //   component={route.component}></Route>

            // -> Route通过render()函数完成组件的渲染
            // props属性，路由模块三大属性(history / location / match)
            // children自定义属性，将嵌套路由的规则传递给子组件
            return <Route path={route.path}
              exact={route.exact}
              key={route.name}
              render={props => {
                // 拦截路由请求(路由导航守卫)
                // 需求：用户没有登录，不允许访问购物车和用户中心
                // let user = localStorage.getItem("loginUser") || null
                // if (!user) {
                //   if (route.path === "/main/cart" || route.path === "/main/ucenter") {
                //     // 提示用户信息并编程式导航返回登录
                //     window.alert("您还没有登录，请登录后访问")
                //     // 返回登录页面
                //     return <Login {...props}></Login>
                //     // 编程式导航(存在多次渲染报错的问题)
                //     // props.history.push('/login')
                //     // return <></>
                //   }
                // }
                return <route.component {...props}
                  children={route.children}></route.component>

              }} />
          }
        })
      }
    </Switch>
  </Suspense>
}

// 导出路由视图组件
export default RouterView
